import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xuance/RoutePath.dart';
import 'package:xuance/bean/AiWarningitemBean.dart';
import 'package:xuance/constant.dart';
import 'package:xuance/generated/assets.dart';
import 'package:xuance/page/warning_detail/logic.dart';
import 'package:xuance/util/ChartUtil.dart';
import 'package:xuance/widget/EmptyWidget.dart';

import 'logic.dart';

class BanListPage extends StatelessWidget {
  const BanListPage({super.key});

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<BanListLogic>();
    final state = logic.state;
    return Scaffold(
        backgroundColor: bgColor,
        body: SafeArea(
            child: Column(
          children: [
            const SizedBox(height: 5),
            Expanded(
                child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Obx(() {
                    if (!state.isExpand.value) {
                      return GestureDetector(
                        onTap: () {
                          state.isExpand.value = true;
                        },
                        child: Container(
                            margin: const EdgeInsets.symmetric(
                                horizontal: 15, vertical: 10),
                            decoration: BoxDecoration(
                                gradient: const LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [
                                      Color.fromARGB(25, 95, 215, 174),
                                      Color.fromARGB(10, 95, 215, 174)
                                    ]),
                                borderRadius: BorderRadius.circular(5)),
                            padding: const EdgeInsets.only(left: 10),
                            child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Image.asset(Assets.assetsBanIpTitle,
                                      scale: 3),
                                  Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Icon(
                                          Icons.keyboard_arrow_down_rounded,
                                          color: c_green))
                                ])),
                      );
                    } else {
                      return Stack(children: [
                        Container(
                            margin: const EdgeInsets.symmetric(
                                vertical: 10, horizontal: 15),
                            padding: const EdgeInsets.all(10),
                            decoration: BoxDecoration(
                                gradient: const LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [
                                      Color.fromARGB(25, 95, 215, 174),
                                      Color.fromARGB(10, 95, 215, 174)
                                    ]),
                                borderRadius: BorderRadius.circular(5)),
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Image.asset(Assets.assetsBanIpTitle,
                                      scale: 3),
                                  Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Obx(() {
                                          return Text(
                                              state.blockipsBan.isEmpty
                                                  ? '0'
                                                  : "${state.blockipsBan.map((m) => m.nums?.toInt() ?? 0).reduce((a, b) => a + b)}",
                                              style: const TextStyle(
                                                  fontSize: 25,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.white));
                                        }),
                                      ]),
                                  const SizedBox(height: 5),
                                  Container(
                                      padding: const EdgeInsets.all(10),
                                      child: AspectRatio(
                                          aspectRatio: 2.1,
                                          child: Obx(() {
                                            if (state.blockipsBan.isEmpty) {
                                              return const EmptyWidget();
                                            }
                                            return LineChart(
                                                ChartUtil.getBanIpChart(
                                                    blockips:
                                                        state.blockipsBan.value,
                                                    currentWarning:
                                                        state.dateType.value));
                                          }))),
                                ])),
                        Positioned(
                            right: 10,
                            top: 10,
                            child: GestureDetector(
                                onTap: () {
                                  state.isExpand.value = false;
                                },
                                child: Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Icon(Icons.keyboard_arrow_up_rounded,
                                        color: c_green))))
                      ]);
                    }
                  }),
                  const SizedBox(height: 13),
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal: 15),
                    decoration: BoxDecoration(
                        gradient: const LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Color.fromARGB(25, 95, 215, 174),
                              Color.fromARGB(10, 95, 215, 174)
                            ]),
                        borderRadius: BorderRadius.circular(5)),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                            padding: const EdgeInsets.all(10),
                            child: Image.asset(Assets.assetsBanIpListTitle,
                                scale: 3)),
                        Obx(() {
                          if (state.listBan.isEmpty) {
                            return const EmptyWidget();
                          }
                          return ListView.builder(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: state.listBan.length,
                            itemBuilder: (BuildContext context, int index) {
                              var bean = state.listBan[index];
                              return GestureDetector(
                                onTap: () {
                                  Get.toNamed(RoutePath.warningDetail,
                                      arguments: TrafficDetailBean(
                                          bean: AiWarningItemList(
                                              sip: bean.sip,
                                              dip: bean.dip,
                                              dpt: bean.dport,
                                              spt: bean.sport,
                                              startDate: bean.blockedTime,
                                              protocols:
                                                  bean.paProtocal?.isEmpty ==
                                                          true
                                                      ? []
                                                      : ['${bean.paProtocal}']),
                                          isWarnDetail: false,
                                          queryCondition:
                                              state.queryCondition.value,
                                          type: state.dateType.value));
                                },
                                child: DefaultTextStyle(
                                  style: TextStyle(color: c_9EA1A6),
                                  child: Container(
                                      color: index % 2 == 0
                                          ? const Color(0xff233F48)
                                          : Colors.transparent,
                                      child: SingleChildScrollView(
                                        scrollDirection: Axis.horizontal,
                                        child: Row(
                                          children: [
                                            Padding(
                                                padding:
                                                    const EdgeInsets.all(8.0),
                                                child: Obx(() {
                                                  return Text(
                                                      "序号:${(logic.page.value - 1) * 10 + index + 1}");
                                                })),
                                            Padding(
                                                padding:
                                                    const EdgeInsets.all(8.0),
                                                child: Text(
                                                    "类型:${bean.serverIty}")),
                                            Padding(
                                                padding:
                                                    const EdgeInsets.all(8.0),
                                                child: Column(
                                                    crossAxisAlignment:
                                                        CrossAxisAlignment
                                                            .start,
                                                    children: [
                                                      Text("从：${bean.sip}"),
                                                      Text(
                                                          "到：${bean.dip}:${bean.dport}")
                                                    ])),
                                            Padding(
                                              padding:
                                                  const EdgeInsets.all(8.0),
                                              child: Column(
                                                children: [
                                                  Text(
                                                      "content：${bean.content}"),
                                                ],
                                              ),
                                            ),
                                          ],
                                        ),
                                      )),
                                ),
                              );
                            },
                          );
                        }),
                        Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              GestureDetector(
                                onTap: logic.lastPage,
                                child: Padding(
                                    padding: const EdgeInsets.all(13),
                                    child: Text("上一页",
                                        style: TextStyle(color: c_9EA1A6))),
                              ),
                              Padding(
                                  padding: const EdgeInsets.all(13),
                                  child: Obx(() {
                                    return Text(
                                        "第${logic.page.value}页,共${state.totalPage.value}页",
                                        style: TextStyle(color: c_9EA1A6));
                                  })),
                              GestureDetector(
                                onTap: logic.nextPage,
                                child: Padding(
                                    padding: const EdgeInsets.all(13),
                                    child: Text("下一页",
                                        style: TextStyle(color: c_green))),
                              )
                            ])
                      ],
                    ),
                  ),
                  const SizedBox(height: 10),
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal: 15),
                    decoration: BoxDecoration(
                        gradient: const LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Color.fromARGB(25, 95, 215, 174),
                              Color.fromARGB(10, 95, 215, 174)
                            ]),
                        borderRadius: BorderRadius.circular(5)),
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 10, vertical: 3),
                          child: Row(
                            children: [
                              Image.asset(Assets.assetsTrigWarning, scale: 3),
                              Expanded(
                                child: Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      GestureDetector(
                                        onTap: logic.levelTap,
                                        child: Padding(
                                            padding: const EdgeInsets.all(8.0),
                                            child: Row(
                                                mainAxisSize: MainAxisSize.min,
                                                children: [
                                                  Text("级别",
                                                      style: TextStyle(
                                                          color: c_green)),
                                                  const SizedBox(width: 5),
                                                  Obx(() {
                                                    return Image.asset(
                                                        state
                                                                    .riskLevelSort
                                                                    .value ==
                                                                "desc"
                                                            ? Assets
                                                                .assetsSourtDown
                                                            : Assets
                                                                .assetsSortUp,
                                                        scale: 2.5);
                                                  })
                                                ])),
                                      ),
                                      GestureDetector(
                                        onTap: logic.timeTap,
                                        child: Padding(
                                            padding: const EdgeInsets.all(8.0),
                                            child: Row(
                                                mainAxisSize: MainAxisSize.min,
                                                children: [
                                                  Text("时间",
                                                      style: TextStyle(
                                                          color: c_green)),
                                                  const SizedBox(width: 5),
                                                  Obx(() {
                                                    return Image.asset(
                                                        state.createdTime
                                                                    .value ==
                                                                "desc"
                                                            ? Assets
                                                                .assetsSourtDown
                                                            : Assets
                                                                .assetsSortUp,
                                                        scale: 2.5);
                                                  })
                                                ])),
                                      ),
                                    ]),
                              )
                            ],
                          ),
                        ),
                        Obx(() {
                          if (state.splunkDataList.isEmpty) {
                            return const EmptyWidget();
                          }
                          return ListView.builder(
                              padding: EdgeInsets.zero,
                              itemCount: state.splunkDataList.length,
                              physics: const NeverScrollableScrollPhysics(),
                              shrinkWrap: true,
                              itemBuilder: (BuildContext context, int index) {
                                var bean = state.splunkDataList[index];
                                return GestureDetector(
                                    onTap: () {
                                      Get.toNamed(RoutePath.splunkDetailList,
                                          arguments: {
                                            "id": "${bean.id}",
                                            "queryCondition":
                                                state.queryCondition.value,
                                            "dateType": state.dateType.value,
                                          });
                                    },
                                    child: Container(
                                        color: index % 2 == 0
                                            ? const Color(0xff233F48)
                                            : Colors.transparent,
                                        padding: const EdgeInsets.all(8.0),
                                        child: Row(children: [
                                          Padding(
                                              padding:
                                                  const EdgeInsets.all(8.0),
                                              child: Text(
                                                  "${((logic.page.value - 1) * 10 + index + 1)}"
                                                      .padLeft(2, "0"),
                                                  style: const TextStyle(
                                                      color: Colors.white,
                                                      fontWeight:
                                                          FontWeight.bold))),
                                          const SizedBox(width: 10),
                                          Expanded(
                                              child: Column(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.start,
                                                  children: [
                                                Text(
                                                    "${bean.searchName} | ${bean.createdTime}",
                                                    style: TextStyle(
                                                        color: c_red,
                                                        fontWeight:
                                                            FontWeight.bold)),
                                                Text("条数 | ${bean.totalEvents}",
                                                    style: const TextStyle(
                                                        color: Colors.white,
                                                        fontWeight:
                                                            FontWeight.bold))
                                              ]))
                                        ])));
                              });
                        }),
                        Padding(
                          padding: const EdgeInsets.symmetric(
                              vertical: 10, horizontal: 8),
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                GestureDetector(
                                    onTap: logic.slastPage,
                                    child: const Padding(
                                        padding: EdgeInsets.all(8.0),
                                        child: Text("上一页",
                                            style: TextStyle(
                                                color: Color(0xff9EA1A6))))),
                                Obx(() {
                                  return Text(
                                      "第${logic.spage}页,共${state.splunkPages.value}页",
                                      style: const TextStyle(
                                          color: Color(0xff9EA1A6)));
                                }),
                                GestureDetector(
                                    onTap: logic.snextPage,
                                    child: Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: Text("下一页",
                                            style: TextStyle(color: c_green))))
                              ]),
                        )
                      ],
                    ),
                  )
                ],
              ),
            )),
          ],
        )));
  }
}
